<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d/control_utils_3d.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/objectron/objectron.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <video class="input_video"></video>
    <canvas class="output_canvas" width="1280px" height="720px"></canvas>
  </div>
  

  <script type="module">
    const videoElement = document.getElementsByClassName('input_video')[0];
    const canvasElement = document.getElementsByClassName('output_canvas')[0];
    const canvasCtx = canvasElement.getContext('2d');
    
    function onResults(results) {
      canvasCtx.save();
      canvasCtx.drawImage(
          results.image, 0, 0, canvasElement.width, canvasElement.height);
      if (!!results.objectDetections) {
        for (const detectedObject of results.objectDetections) {
          // Reformat keypoint information as landmarks, for easy drawing.
          const landmarks =
              detectedObject.keypoints.map(x => x.point2d);
          // Draw bounding box.
          drawingUtils.drawConnectors(canvasCtx, landmarks,
              mpObjectron.BOX_CONNECTIONS, {color: '#FF0000'});
          // Draw centroid.
          drawingUtils.drawLandmarks(canvasCtx, [landmarks[0]], {color: '#FFFFFF'});
        }
      }
      canvasCtx.restore();
    }
    
    const objectron = new Objectron({locateFile: (file) => {
      return `https://cdn.jsdelivr.net/npm/@mediapipe/objectron/${file}`;
    }});
    objectron.setOptions({
      modelName: 'Chair',
      maxNumObjects: 3,
    });
    objectron.onResults(onResults);
    
    const camera = new Camera(videoElement, {
      onFrame: async () => {
        await objectron.send({image: videoElement});
      },
      width: 1280,
      height: 720
    });
    camera.start();
    </script>
</body>
</html>